<template>
    <div class="smart-workshop">
        <div class="header">
            <div class="header-left"></div>
            <div class="header-center">
                <div class="title-decoration left"></div>
                <div class="title">朗歌斯-自动生产线看板</div>
                <div class="title-decoration right"></div>
            </div>
            <div class="header-right">
                <div class="time">{{ currentTime }}</div>
            </div>
        </div>
        <div class="dashboard-content">
            <div class="left-section">
                <!-- 一周不良品统计 -->
                <div class="chart-card">
                    <div class="card-header">一周不良品统计</div>
                    <div ref="weeklyDefectChart" class="chart"></div>
                </div>
                <div class="small-cards">
                    <!-- 关键工序 -->
                    <div class="chart-card radar-card">
                        <div class="card-header">关键工序</div>
                        <div ref="processRadarChart" class="chart radar-chart"></div>
                    </div>
                    <!-- 当日生产率评估 -->
                    <div class="info-card rate-card">
                        <div class="card-header">当日生产率评估</div>
                        <div class="production-rate">
                            <div class="rate-item">
                                <span class="label">实际完成率:</span>
                                <span class="value success">{{ actualRate }}%</span>
                            </div>
                            <div class="rate-item">
                                <span class="label">期望完成率:</span>
                                <span class="value">{{ expectedRate }}%</span>
                            </div>
                            <div class="rate-item">
                                <span class="label">单件耗时:</span>
                                <span class="value" :class="{ warning: isTimeExceeded }">{{ unitTime }}s</span>
                            </div>
                            <div class="rate-item">
                                <span class="label">标准耗时:</span>
                                <span class="value">{{ standardTime }}s</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 一周产量均差 -->
                <div class="chart-card">
                    <div class="card-header">一周产量均差</div>
                    <div ref="weeklyOutputChart" class="chart"></div>
                </div>
            </div>

            <div class="center-section">
                <div class="progress-cards">
                    <!-- 订单总体进度 -->
                    <div class="chart-card">
                        <div class="card-header">订单总体进度</div>
                        <div class="chart-container">
                            <div ref="totalProgressChart" class="chart"></div>
                            <div class="progress-info">
                                <div class="info-item">
                                    <span class="label">总计划</span>
                                    <span class="value">{{ totalPlan }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">已经生产</span>
                                    <span class="value">{{ produced }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">不良品</span>
                                    <span class="value">{{ defects }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">完成率</span>
                                    <span class="value">{{ completionRate }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 订单今日进度 -->
                    <div class="chart-card">
                        <div class="card-header">订单今日进度</div>
                        <div class="chart-container">
                            <div ref="todayProgressChart" class="chart"></div>
                            <div class="progress-info">
                                <div class="info-item">
                                    <span class="label">今日计划</span>
                                    <span class="value">{{ todayPlan }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">已经生产</span>
                                    <span class="value">{{ todayProduced }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">不良品</span>
                                    <span class="value">{{ todayDefects }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">良品率</span>
                                    <span class="value success">{{ qualityRate }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 近期生产计划列表 -->
                <div class="table-card production-plan">
                    <div class="card-header">近期生产计划列表</div>
                    <div class="table-container">
                        <div class="scroll-container" ref="scrollContainer">
                            <el-table :data="productionPlans" style="width: 100%" :border="true" :show-header="true">
                                <el-table-column prop="documentcode" label="订单编号" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="plannedquantity" label="计划数量" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="plannedtarttime" label="计划开始时间" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="createTime" label="计划结束时间" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="state" label="状态" align="center" width="140"></el-table-column>
                            </el-table>
                            <!-- 复制一份表格用于无缝滚动 -->
                            <el-table :data="productionPlans" style="width: 100%" :border="true" :show-header="false">
                                <el-table-column prop="documentcode" label="订单编号" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="plannedquantity" label="计划数量" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="plannedtarttime" label="计划开始时间" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="createTime" label="计划结束时间" align="center"
                                    width="140"></el-table-column>
                                <el-table-column prop="state" label="状态" align="center" width="140"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-section">
                <div class="info-cards">
                    <!-- 当前班组 -->
                    <div class="info-card team-card">
                        <div class="card-header">当前班组</div>
                        <div class="team-info">
                            <div class="info-row">
                                <div class="label">名称</div>
                                <div class="value">{{ currentTeam.teamName }}</div>
                            </div>
                            <div class="info-row">
                                <div class="label">人数</div>
                                <div class="value">{{ currentTeam.teamNum }}</div>
                            </div>
                            <div class="info-row">
                                <div class="label">负责人</div>
                                <div class="value">{{ currentTeam.duty }}</div>
                            </div>
                            <div class="info-row">
                                <div class="label">电话</div>
                                <div class="value">{{ currentTeam.phone }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- 异常列表 -->
                    <div class="info-card exception-card">
                        <div class="card-header">异常列表</div>
                        <div class="exception-list">
                            <el-table :data="exceptions" style="width: 100%" :border="true">
                                <el-table-column prop="type" label="类型" align="center"></el-table-column>
                                <el-table-column prop="description" label="描述" align="center"></el-table-column>
                                <el-table-column prop="time" label="时间" align="center"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>

                <!-- 最近生产产品列表 -->
                <div class="table-card">
                    <div class="card-header">最近生产产品列表</div>
                    <el-table :data="recentProducts" style="width: 100%" :border="true">
                        <el-table-column prop="productCode" label="产品序列号" align="center"></el-table-column>
                        <el-table-column prop="quality" label="产品品质" align="center"></el-table-column>
                        <el-table-column prop="createTime" label="生产时间" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import * as echarts from 'echarts'
import http from '@/api/http'
// 图表实例
const weeklyDefectChart = ref(null)
const processRadarChart = ref(null)
const weeklyOutputChart = ref(null)
const totalProgressChart = ref(null)
const todayProgressChart = ref(null)
// 数据
const currentTime = ref('')
//订单总体进度
const totalPlan = ref(3000)
const produced = ref(1000)
const defects = ref(2)
const completionRate = ref(33.33)
//订单今日进度
const todayPlan = ref(1000)
const todayProduced = ref(100)
const todayDefects = ref(1)
const qualityRate = ref(98)
const currentTeamlist = ref([])
const getCurrentTeam = () => {
    // http.get('/api/TeamManagement/GetTeamledger').then(res => {
    //     currentTeamlist.value = res.data
    // })
}
const currentTeam = computed(() => {
    return currentTeamlist.value[0] || {
        teamName: '',
        teamNum: '',
        duty: '',
        phone: ''
    }
})
onMounted(() => {
    getCurrentTeam()
    getProductionPlans()//工单台账列表显示
    getRecentProductss()//产品维护维护显示
})

const productionPlans = ref([])
const getProductionPlans = () => {
    http.get('/api/visualizationplatform/GetTicketsLedgerShow').then(res => {
        productionPlans.value = res.data
    })
}
// 产品维护维护显示
const recentProducts = ref([])
const getRecentProductss = () => {
    http.get('/api/visualizationplatform/GetMaintenanceShow').then(res => {
        console.log(res.data)
        recentProducts.value = res.data
    })
}
const actualRate = ref(10)
const expectedRate = ref(20)
const unitTime = ref(32)
const standardTime = ref(30)
const isTimeExceeded = ref(true)
// 自动滚动相关
const autoScroll = () => {
    const firstItem = productionPlans.value[0]
    productionPlans.value = [...productionPlans.value.slice(1), firstItem]
}
onMounted(() => {
    // 启动定时器进行自动滚动
    setInterval(autoScroll, 3000) // 每3秒滚动一次

})
// 初始化图表
const initCharts = () => {
    // 一周不良品统计
    const defectChart = echarts.init(weeklyDefectChart.value)
    defectChart.setOption({
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.7)',
            borderColor: '#00e4ff',
            textStyle: { color: '#fff' }
        },
        grid: {
            top: '10%',
            left: '10%',
            right: '5%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6'],
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
            data: [4, 3, 2.5, 2, 4, 0.5],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                color: '#00ff00',
                width: 3
            },
            itemStyle: {
                color: '#00ff00'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0,255,0,0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(0,255,0,0)'
                    }]
                }
            }
        }]
    })

    // 关键工序雷达图
    const radarChart = echarts.init(processRadarChart.value)
    radarChart.setOption({
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.7)',
            borderColor: '#00e4ff',
            textStyle: { color: '#fff' }
        },
        radar: {
            indicator: [
                { name: '压缩端子', max: 100 },
                { name: '绕线', max: 100 },
                { name: '印时码', max: 100 },
                { name: '点胶', max: 100 },
                { name: '装配', max: 100 }
            ],
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(0,102,255,0.1)', 'rgba(0,102,255,0.2)']
                }
            },
            name: {
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            type: 'radar',
            data: [{
                value: [90, 85, 95, 80, 88],
                areaStyle: {
                    color: 'rgba(0,255,0,0.3)'
                },
                lineStyle: {
                    color: '#00ff00',
                    width: 2
                },
                itemStyle: {
                    color: '#00ff00'
                }
            }]
        }]
    })

    // 订单总体进度
    const totalProgress = echarts.init(totalProgressChart.value)
    totalProgress.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
            backgroundColor: 'rgba(0,0,0,0.7)',
            borderColor: '#00e4ff',
            textStyle: { color: '#fff' }
        },
        series: [{
            type: 'pie',
            radius: ['75%', '90%'],
            label: { show: false },
            data: [
                {
                    value: 33.33,
                    name: '完成',
                    itemStyle: {
                        color: '#00ff00'
                    }
                },
                {
                    value: 66.67,
                    name: '未完成',
                    itemStyle: {
                        color: '#0066ff'
                    }
                }
            ]
        }]
    })

    // 订单今日进度
    const todayProgress = echarts.init(todayProgressChart.value)
    todayProgress.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
            backgroundColor: 'rgba(0,0,0,0.7)',
            borderColor: '#00e4ff',
            textStyle: { color: '#fff' }
        },
        series: [{
            type: 'pie',
            radius: ['75%', '90%'],
            label: { show: false },
            data: [
                {
                    value: 98,
                    name: '良品',
                    itemStyle: {
                        color: '#00ff00'
                    }
                },
                {
                    value: 2,
                    name: '不良品',
                    itemStyle: {
                        color: '#0066ff'
                    }
                }
            ]
        }]
    })

    // 一周产量均差
    const outputChart = echarts.init(weeklyOutputChart.value)
    outputChart.setOption({
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.7)',
            borderColor: '#00e4ff',
            textStyle: { color: '#fff' }
        },
        grid: {
            top: '10%',
            left: '10%',
            right: '5%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6'],
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
            data: [1000, 200, 400, 500, 600, 0],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
                color: '#00ff00',
                width: 3
            },
            itemStyle: {
                color: '#00ff00'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0,255,0,0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(0,255,0,0)'
                    }]
                }
            }
        }]
    })
}

// 更新时间
const updateTime = () => {
    const now = new Date()
    currentTime.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日-${now.getHours()}时${now.getMinutes()}分${now.getSeconds()}秒`
}

let timer
onMounted(() => {
    initCharts()
    updateTime()
    timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})
const scrollContainer = ref(null)
let scrollTimer = null

const startScroll = () => {
    if (!scrollContainer.value) return

    const scrollHeight = scrollContainer.value.scrollHeight / 2
    let currentScroll = 0

    scrollTimer = setInterval(() => {
        currentScroll += 1
        if (currentScroll >= scrollHeight) {
            currentScroll = 0
            scrollContainer.value.scrollTop = 0
        }
        scrollContainer.value.scrollTop = currentScroll
    }, 50)
}

onMounted(() => {
    // 延迟启动滚动，等待表格渲染完成
    setTimeout(() => {
        startScroll()
    }, 1000)
})

onUnmounted(() => {
    if (scrollTimer) {
        clearInterval(scrollTimer)
    }
})
// completionRate.value = ((produced.value / totalPlan.value) * 100).toFixed(2)
</script>

<style scoped>
.smart-workshop {
    width: 100%;
    min-height: 100vh;
    background: #001529;
    color: white;
    padding: 20px;
    box-sizing: border-box;
}

.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 20px;
    position: relative;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.title {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 0 20px;
    background: linear-gradient(180deg, #ffffff 0%, #4a9fff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(74, 159, 255, 0.3);
}

.title-decoration {
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            #4a9fff 50%,
            transparent 100%);
    position: relative;
}

.title-decoration::before {
    content: '';
    position: absolute;
    top: -4px;
    width: 10px;
    height: 10px;
    background: #4a9fff;
    transform: rotate(45deg);
}

.title-decoration.left::before {
    right: 0;
}

.title-decoration.right::before {
    left: 0;
}

.header-right {
    display: flex;
    justify-content: flex-end;
}

.time {
    font-size: 18px;
    color: #fff;
    background: rgba(0, 102, 255, 0.2);
    padding: 5px 15px;
    border-radius: 4px;
    border: 1px solid rgba(74, 159, 255, 0.3);
}

.dashboard-content {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    padding: 0 20px;
}

.chart-card,
.info-card,
.table-card {
    background: rgba(0, 21, 41, 0.8);
    border: 1px solid #0066ff;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header {
    background: rgba(0, 102, 255, 0.2);
    color: #fff;
    padding: 10px 15px;
    font-size: 16px;
    border-bottom: 1px solid #0066ff;
}

.chart {
    height: 280px;
    padding: 10px;
}

.progress-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-container {
    display: flex;
    flex-direction: column;
}

.progress-info {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
}

.team-info {
    padding: 15px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 5px 10px;
}

.production-rate {
    padding: 15px;
}

.rate-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 5px 10px;
}

.label {
    color: #999;
}

.value {
    color: #fff;
}

.success {
    color: #00ff00;
}

.warning {
    color: #ff9900;
}

:deep(.el-table) {
    background-color: transparent !important;
    color: white !important;
}

:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
    background-color: transparent !important;
    border-color: #0066ff !important;
    color: white !important;
}

:deep(.el-table thead th) {
    background-color: rgba(0, 102, 255, 0.2) !important;
    color: white !important;
}

:deep(.el-table--border) {
    border-color: #0066ff !important;
}

:deep(.el-tag) {
    border: none;
}

:deep(.el-tag--info) {
    background-color: rgba(144, 147, 153, 0.3);
    border-color: transparent;
}

:deep(.el-tag--warning) {
    background-color: rgba(230, 162, 60, 0.3);
    border-color: transparent;
}

:deep(.el-tag--success) {
    background-color: rgba(0, 255, 0, 0.3);
    border-color: transparent;
}

.small-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.radar-card,
.rate-card {
    height: 280px;
}

.radar-chart {
    height: 220px;
}

.production-rate {
    padding: 10px;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.right-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.team-card {
    background: rgba(0, 21, 41, 0.8);
    border: 1px solid rgba(0, 102, 255, 0.5);
    border-radius: 4px;
    overflow: hidden;
}

.team-card .card-header {
    background: rgba(0, 102, 255, 0.2);
    color: #fff;
    padding: 10px 15px;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 102, 255, 0.3);
}

.team-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.info-row .label {
    color: #4a9fff;
    min-width: 50px;
}

.info-row .value {
    color: #fff;
    flex: 1;
}

/* 添加发光边框效果 */
.team-card {
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.2);
    position: relative;
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 102, 255, 0.3);
    border-radius: 4px;
    pointer-events: none;
}

.exception-card {
    height: 200px;
}

.exception-list {
    height: calc(100% - 40px);
    overflow: auto;
}

/* 表格样式 */
.production-plan {
    background: rgba(0, 21, 41, 0.8);
    border: 1px solid rgba(0, 102, 255, 0.5);
}

.table-container {
    height: 240px;
    overflow: hidden;
    position: relative;
}

.scroll-container {
    height: 100%;
    overflow: hidden;
}

:deep(.el-table) {
    background-color: transparent !important;
    border: none !important;
}

:deep(.el-table::before) {
    display: none;
}

:deep(.el-table__inner-wrapper::before) {
    display: none;
}

:deep(.el-table__body-wrapper) {
    background-color: transparent !important;
}

:deep(.el-table tr) {
    background-color: transparent !important;
}

:deep(.el-table td),
:deep(.el-table th) {
    border-bottom: 1px solid rgba(0, 102, 255, 0.2) !important;
    padding: 8px 0;
    height: 40px;
}

:deep(.el-table th) {
    background-color: rgba(0, 102, 255, 0.2) !important;
    color: #4a9fff !important;
    font-weight: normal;
}

:deep(.el-table td) {
    background-color: transparent !important;
    color: #fff !important;
}

/* 状态标签样式 */
.status-tag {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.status-created {
    background: rgba(64, 158, 255, 0.15);
    color: #409EFF;
}

.status-processing {
    background: rgba(230, 162, 60, 0.15);
    color: #E6A23C;
}

.status-completed {
    background: rgba(103, 194, 58, 0.15);
    color: #67C23A;
}

/* 入场动画 */
@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.scroll-container {
    animation: slideIn 0.5s ease-out;
}
</style>